<!--
 * @Author: wangding
 * @Date: 2020-10-30 16:30:53
 * @LastEditTime: 2020-12-25 19:48:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\externalInterface\add.vue
-->
<template>
    <div>
        <el-dialog
            title="编辑"
            :visible="apiVisibleEdit"
            width="30%"
            @close="()=>{$store.commit('setApiVisibleEdit',false)}">
            <el-form ref="form" :model="form" label-width="160px" >
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item label="接入者" prop="accessName" :rules="[{ required: true, message: '不能为空'}]">
                            <el-input v-model="form.accessName" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item label="到期时间" prop="expireTime" :rules="[{ required: true, message: '不能为空'}]">
                            <el-date-picker
                            v-model="form.expireTime"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy-MM-dd"
                            value-format='yyyy-MM-dd'
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item label="峰值频率（次/秒）" prop="accessName" :rules="[{ required: true, message: '不能为空'}]">
                            <el-input v-model="form.peakFrequency" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item label="日调用频率（次/日）" prop="accessName" :rules="[{ required: true, message: '不能为空'}]">
                            <el-input v-model="form.dailyFrequency" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item label="类型" prop="type" :rules="[{ required: true, message: '不能为空'}]" >
                            <el-select v-model="form.type" filterable placeholder="请选择" @change='changeType'>
                                <el-option
                                v-for="item in userTypeList"
                                :key="item.id"
                                :label="item.text"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" v-if='form.type==0? true:false'>
                    <el-col :span="16" :offset="3">
                        <el-form-item label="用户" prop="firmId" :rules="[{ required: true, message: '不能为空'}]" >
                            <el-select
                                v-model="form.firmId"
                                filterable
                                remote
                                reserve-keyword
                                placeholder="请输入关键词"
                                :remote-method="remoteMethod"
                                :loading="loading">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.ids"
                                    :label="item.loginName"
                                    :value="item.ids">
                                    </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" v-else>
                    <el-col :span="16" :offset="3">
                        <el-form-item label="组织" prop="firmId" :rules="[{ required: true, message: '不能为空'}]" >
                            <el-select v-model="form.firmId" filterable placeholder="请选择">
                                <el-option
                                v-for="item in firmDataList"
                                :key="item.sid"
                                :label="item.firmName"
                                :value="item.sid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setApiVisibleEdit',false)}">取 消</el-button>
                <el-button type="primary" @click="save('form')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        editRowsData:{
            type:Object,
            default:()=>{return {}}
        }
    },
    data() {
        return {
            form:{
                accessName:'',
                expireTime:'',
                peakFrequency:'',
                dailyFrequency:"",
                type:'0',
                firmId:'',
            },
            userTypeList:[{
                id:'0',
                text:'用户'
            },{
                id:'1',
                text:'组织'
            }],
            loading:false,
            options:[],
            firmDataList:[]
        };
    },
    computed: {
        apiVisibleEdit(){
            return this.$store.state.sysStore.apiVisibleEdit
        }
    },
    watch: {
        editRowsData:{
            handler(nv,ov){
                if(nv){
                    this.form.accessName = nv.accessName
                    this.form.expireTime = nv.expireTime
                    this.form.peakFrequency = nv.peakFrequency
                    this.form.dailyFrequency = nv.dailyFrequency
                    this.form.type = nv.type + ""
                    this.form.firmId = nv.firmIds 
                    
                    if(nv.type == 0){
                        this.options = [{loginName:nv.firmName,ids:nv.firmIds}]
                    }
                }
            }
        }
    },
    created() {

    },
    mounted() {
        this.firmGetAllFirm()
    },
    methods: {
        changeType(){
            this.form.firmId = ''
        },
        async firmGetAllFirm(){
            let res = await this.API.firmGetAllFirm({})
            this.firmDataList = res
        },
        async remoteMethod(query){
            if(query != ''){
                this.loading = true;
                let res = await this.API.siteGetUserList({
                    loginName:query
                })
                this.loading = false;
                this.options = res || []
            }else{
                this.options = [];
            }
        },
        async apiAddApi(){
            let firmName = this.returnFirmName()
            let res = await this.API.apiUpdateApi(Object.assign({},this.form,{firmName:firmName,id:this.editRowsData.sid}))
            if(res.success){
                this.$message({
                message: '操作成功',
                type: 'success'
                });
                this.$store.commit('setApiVisibleEdit',false)
                this.$emit('uploadData',true)
            }else{
                this.$message({
                message: '操作失败',
                type: 'warning'
                });
            }
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.apiAddApi()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        returnFirmName(){
            let firmName = ''
            if(this.form.type == 0){
                this.options.forEach(item =>{
                    if(item.ids == this.form.firmId){
                        firmName = item.loginName
                    }
                })
            }
            if(this.form.type == 1){
                this.firmDataList.forEach(item =>{
                    if(item.sid == this.form.firmId){
                        firmName = item.firmName
                    }
                })
            }
            return firmName
        }
    },
};
</script>

<style  lang="less" scoped>

</style>
